<template>
  <div>
    <!--  <h1>册内目录</h1> -->
    <div class="container">
      <div class="container-right">
        <div class="top">
          <div class="top-right">
            <el-form :model="ruleForm" class="demo-form-inline" ref="ruleForm">
              <el-form-item label="互见号：">
                <el-input
                  :disabled="true"
                  v-model="ruleForm.Reciprocal"
                ></el-input>
              </el-form-item>
              <el-form-item label="档案密级：">
                <el-input
                  :disabled="true"
                  v-model="ruleForm.FileSecurity"
                ></el-input>
              </el-form-item>
              <el-form-item label="案卷页数：">
                <el-input
                  :disabled="true"
                  v-model="ruleForm.page_num"
                ></el-input>
              </el-form-item>
              <el-form-item label="起止日期:">
                <el-input
                  :disabled="true"
                  v-model="ruleForm.start_end_date"
                ></el-input>
              </el-form-item>
              <el-form-item label="保管期限：">
                <el-select clearable v-model="ruleForm.store_period">
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :disabled="true"
                    :label="item.title"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
                <!-- <el-input v-model="ruleForm.store_period"></el-input> -->
              </el-form-item>

              <el-button class="classBack" @click="goBack">返回案卷</el-button>

              <el-form-item
                class="TextArea"
                label="案卷题名:"
                :label-width="formLabelWidth"
              >
                <el-input
                  type="textarea"
                  :disabled="true"
                  v-model="ruleForm.title"
                ></el-input>
              </el-form-item>
              <el-form-item
                class="TextArea"
                label="备考表说明:"
                :label-width="formLabelWidth"
              >
                <el-input
                  type="textarea"
                  :disabled="true"
                  v-model="ruleForm.append_remark"
                ></el-input>
              </el-form-item>
              <el-form-item
                class="TextArea"
                label="备注:"
                :label-width="formLabelWidth"
              >
                <el-input
                  type="textarea"
                  :disabled="true"
                  v-model="ruleForm.remarks"
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <el-form :inline="true">
          <div class="commontop">
            <div class="commontop-left">
              <el-select
                clearable
                class="elSect"
                v-model="froms.type"
                placeholder="请选择要搜索内容"
                prefix-icon="el-icon-search"
              >
                <el-option
                  v-for="item in optionsTitle"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                >
                </el-option>
              </el-select>
              <el-input
                placeholder="项目名称、ID"
                v-model="froms.keyword"
                @change="INput"
                @clear="INput"
                @keyup.enter.native="goSearch()"
                clearable
                prefix-icon="el-icon-search"
              ></el-input>
              <el-button
                class="searchbgc"
                @click="goSearch"
                icon="iconfont icon-sousuo2"
                >搜索</el-button
              >
              <el-button @click="ProblemMark">问题标记</el-button>
              <el-tooltip
                class="item"
                effect="dark"
                content="不选中则默认全选"
                placement="top"
              >
                <el-button @click="Submission" icon="iconfont icon-jieyuejilu"
                  >借阅审批</el-button
                >
              </el-tooltip>
              <el-button size="mini" v-show="xsyc === '1' ? true : false"
                >首卷</el-button
              >
              <el-button size="mini" v-show="xsyc === '1' ? true : false"
                >上一卷</el-button
              >
              <el-button size="mini" v-show="xsyc === '1' ? true : false"
                >下一卷</el-button
              >
              <el-button size="mini" v-show="xsyc === '1' ? true : false"
                >尾卷</el-button
              >
            </div>
          </div>
        </el-form>

        <el-table
          v-loading="isLoading"
          class="table"
          :data="tableData"
          border
          max-height="600"
          @selection-change="handleSelectionChange"
          :header-cell-style="{
            backgroundColor: '#3963fd',
            color: '#fff',
            'text-align': 'center',
          }"
          style="width: 100%; margin-top: 20px"
        >
          <template slot="empty">
            <img
              src="@/assets/imgs/暂未数据.png"
              alt
              style="margin-top: 104px"
            />
            <p style="margin-top: 15px; margin-bottom: 104px">暂未有数据</p>
          </template>
          <el-table-column type="selection" width="50"></el-table-column>
          <el-table-column type="index + 1" width="65" label="序号">
            <template slot-scope="scope">
              <a>{{ scope.row.index + 1 }} </a>
            </template>
          </el-table-column>
          <el-table-column
            width="220"
            align="center"
            prop="file_number"
            label="文件编号"
          >
          </el-table-column>
          <el-table-column
            width="180"
            align="center"
            prop="responsible"
            label="责任者"
          >
          </el-table-column>
          <el-table-column align="left" prop="title" label="文件材料题名">
          </el-table-column>
          <el-table-column
            width="100"
            align="center"
            prop="c_date"
            label="日期"
          >
          </el-table-column>

          <el-table-column
            width="80"
            align="center"
            prop="page_num"
            label="页号"
          >
          </el-table-column>
          <el-table-column
            width="100"
            align="center"
            prop="remark"
            label="备注"
          >
          </el-table-column>
          <el-table-column
            width="60"
            align="center"
            prop="is_pic"
            label="是否图纸"
          >
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.is_pic"
                active-color="#13ce66"
                active-value="1"
                inactive-value="0"
                disabled
                inactive-color="#ccc"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="110px">
            <!-- v-if="scope.row.value1 == true ? true : false"  -->
            <template slot-scope="scope">
              <el-tooltip
                content="查看"
                v-if="scope.row.can_look == 1"
                placement="top"
              >
                <el-button class="green" size="mini"
                  ><a target="__blank" :href="scope.row.file_url"
                    ><i class="iconfont icon-piliangdaorupdf"></i></a
                ></el-button>
              </el-tooltip>
              <el-tooltip
                content="暂无权限"
                v-if="scope.row.can_look == 0"
                placement="top"
              >
                <el-button class="red" size="mini"
                  ><i class="iconfont icon-piliangdaorupdf"></i
                ></el-button>
              </el-tooltip>
              <el-tooltip
                content="问题"
                v-show="scope.row.problem != ''"
                placement="top"
              >
                <el-button class="red" size="mini"
                  ><i class="el-icon-s-opportunity"></i
                ></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!--    <el-dialog
      :visible.sync="centerDialogVisible"
      width="70%"
      height="700px"
      center
    >
      <div class="Sync">
        <div class="leftSync">
          <el-tree
            :data="datas"
            class="filter-tree"
            :props="defaultProps"
            node-key="id"
            :highlight-current="true"
            @node-click="handleNodeClick2"
          >
            <span class="span-ellipsis" slot-scope="{ node, data }">
              <el-tooltip
                class="item"
                effect="light"
                :content="node.label || ''"
                placement="top-start"
              >
                <span>{{ node.label }}</span>
              </el-tooltip>
            </span>
          </el-tree>
        </div>
        <div class="rightSync">
          <i class="el-icon-arrow-left" @click="GoLeft(1)"></i>
          <iframe
            :src="pageUrl"
            frameborder="0"
            style="width: 100%; height: 600px"
          ></iframe>
          <i class="el-icon-arrow-right" @click="GoLeft(2)"></i>
        </div>
      </div>
    </el-dialog> -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="25%">
      <el-autocomplete
        class="inline-input"
        v-model="problemFrom.problem"
        :fetch-suggestions="querySearch"
        placeholder="请输入内容"
        @select="handleSelect"
      ></el-autocomplete>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="problemFromBtn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getbookCatalogs,
  BtnBookTitles,
  bookContents,
  quickSwitchPdf,
  bookCatalogsproblem,
  submitBorrows,
} from "@/api/Template/index";
export default {
  data() {
    return {
      /* 树状图数据 */
      datas: [],
      /* 树状图子集和标题 */
      defaultProps: {
        children: "children",
        label: "title",
      },
      /* 树状图修改 */
      filterText: "",
      /* 使用期限选择 */
      options: [
        { id: 1, title: "永久" },
        { id: 2, title: "10年" },
        { id: 3, title: "3年" },
      ],
      //按钮显示隐藏
      xsyc: "1",

      //右边表格搜索
      froms: {
        book_title_id: "",
        project_classify_id: sessionStorage.getItem("clickTd"),
        keyword: "",
        type: ",",
      },

      /* 表格数据 */
      tableData: [
        {
          book_title_id: 1,
          c_date: "20170719",
          creator_id: 1,
          responsible: "中铁十一局集团有限公司",
          file_number: "桥变Ⅱb类[2017]002号",
          file_url:
            "http://tieluoss.oss-cn-chengdu.aliyuncs.com/files/20221128/027fbaaee449cf213ac2b9c953b69305.pdf",
          id: 1,
          index: 0,
          is_pic: "0",
          number: 1,
          page_num: "1",
          problem: "",
          remark: "",
          serial_no: 1,
          title: "巴阳双线特大桥3#墩桩基钻孔变挖孔变更设计",
        },
      ],
      optionsTitle: [
        { id: "1", title: "文件编号" },
        { id: "2", title: "文件材料名" },
      ],
      /* 提交借阅审批 */
      Submissionfrom: {
        project_id: "",
        part_company_id: "",
        project_classify_id: "",
        type: "2",
        ids: "",
        select_all: "",
      },
      /* 获取表格数据 */
      pages: {
        book_title_id: "",
        project_classify_id: sessionStorage.getItem("clickTd"),
        part_company_id: this.$route.query.companyId,
      },
      //加载页面
      isLoading: false,

      /* 表单宽度 */
      formLabelWidth: "90px",

      /* 问题标记的蒙尘 */
      dialogVisible: false,
      /* 输入建议框的建议数组 */
      restaurants: [],
      /* 提交错误的输入框的绑定值 */
      problemFrom: {
        ids: "",
        problem: "",
        project_classify_id: sessionStorage.getItem("clickTd"),
      },

      /* 头部的表单 */
      ruleForm: {},

      //显示PDF蒙尘
      centerDialogVisible: false,
      pageUrl: "", // pdf地址
      /*  查看pdf判断上一个或者下一个提供的数据*/
      Pdflist: {
        type: "",
        book_catalog_id: "",
      },
    };
  },
  watch: {
    /* 树状图监听搜索 */
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },

  methods: {
    /* 获取头部展示栏数据 */
    async loadData2() {
      /* let id = this.$route.query.id; */

      console.log(id);
      let project_classify_id = sessionStorage.getItem("clickTd");
      let res = await BtnBookTitles(id, { project_classify_id });
      console.log(res, "111");
      this.ruleForm = res.data.data;
      /*  this.tables.book_title_id = this.$route.query.id;*/
      this.pages.book_title_id = this.ruleForm.id;
      this.loadData3();
    },
    /* 获取表格数据 */
    async loadData3() {
      let num = this.pages;
      let res2 = await getbookCatalogs(num);
      this.tableData = res2.data.data;
    },
    /* 树状图搜索 */
    INput() {
      if (this.froms.keyword == "") {
        this.loadData2();
      }
    },
    /* 树状图点击触发 */
    handleNodeClick2(data) {
      console.log(data);
      this.pageUrl = data.file_url;
      this.Pdflist.book_catalog_id = data.book_catalog_id;
    },
    //搜索表格
    async goSearch() {
      this.froms.page = 1;
      this.froms.per_page = 10;
      this.current_page = 1;
      this.$loading();
      console.log(this.froms);
      if (this.froms.keyword == "") {
        this.$message.warning("查询条件不能为空！");
        return;
      }
      this.froms.book_title_id = this.$route.query.id;
      let res = await bookCatalogs(this.froms);
      console.log(res);
      this.tableData = res.data.data.data;
      this.$loading().close();
    },
    /* 跳转到第一卷 */
    async clickOne(item) {
      let id = this.ruleForm.id;
      let type = item;
      let project_classify_id = sessionStorage.getItem("clickTd");
      let res = await BtnBookTitles(id, { type, project_classify_id });

      this.ruleForm = res.data.data;
      this.pages.book_title_id = this.ruleForm.id;
      this.loadData3();
    },
    /* 跳转到上一卷 */
    async clickTwo(item) {
      let id = this.ruleForm.id;
      console.log(id);
      let type = item;
      let project_classify_id = sessionStorage.getItem("clickTd");
      let res = await BtnBookTitles(id, { type, project_classify_id });
      console.log(res, "131");
      this.ruleForm = res.data.data;
      this.pages.book_title_id = this.ruleForm.id;
      this.loadData3();
    },
    /* 跳转到下一卷 */
    async clickThree(item) {
      let id = this.ruleForm.id;
      console.log(id);
      let type = item;
      let project_classify_id = sessionStorage.getItem("clickTd");
      let res = await BtnBookTitles(id, { type, project_classify_id });
      console.log(res, "141");
      this.ruleForm = res.data.data;
      this.pages.book_title_id = this.ruleForm.id;
      this.loadData3();
    },
    /* 跳转到最后一卷 */
    async clickFour(item) {
      let id = this.ruleForm.id;
      console.log(id);
      let type = item;
      let project_classify_id = sessionStorage.getItem("clickTd");
      let res = await BtnBookTitles(id, { type, project_classify_id });
      console.log(res, "151");
      this.ruleForm = res.data.data;
      this.pages.book_title_id = this.ruleForm.id;
      this.loadData3();
    },
    /* 返回案卷目录 */
    goBack() {
      this.$router.push({
        path: "/project/template-item/filing/matching/Searchfiles",
        query: {
          template_id: this.$route.query.template_id,
          companyId: this.$route.query.companyId,
        },
      });
    },
    //多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(val);
    },
    /* 判断查看上一个还是下一个 */
    async GoLeft(num) {
      if (num == 1) {
        this.Pdflist.type = "pre";
      } else if (num == 2) {
        this.Pdflist.type = "next";
      }
      let list = this.Pdflist;
      let res = await quickSwitchPdf(list);
      console.log(res, "1111");
      this.pageUrl = res.data.data.file_url;
      this.Pdflist.book_catalog_id = res.data.data.book_catalog_id;
    },
    /* 提交案卷 */
    async Submission() {
      this.Submissionfrom.project_id = this.$route.query.template_id;
      this.Submissionfrom.part_company_id = this.$route.query.companyId;
      this.Submissionfrom.project_classify_id =
        sessionStorage.getItem("clickTd");
      if (this.multipleSelection == null) {
        this.Submissionfrom.select_all = "1";
        this.Submissionfrom.ids = [];
      } else {
        this.Submissionfrom.select_all = "0";
        let arr = this.multipleSelection.map((item) => item.id);
        this.Submissionfrom.ids = arr;
      }
      console.log(this.Submissionfrom);
      let res = await submitBorrows(this.Submissionfrom);
      if (res.data.code === 200) {
        this.$message({
          showClose: true,
          duration: 3000,
          message: res.data.msg,
          type: "success",
        });
      } else {
        this.$message({
          showClose: true,
          duration: 3000,
          message: res.data.msg,
          type: "error",
        });
      }
    },
    //问题标记
    ProblemMark() {
      if (this.multipleSelection == null) {
        this.$message({
          showClose: true,
          duration: 3000,
          message: "请先选中要标记的问题",
          type: "error",
        });
      } else {
        this.dialogVisible = true;
      }
    },
    /* 提交问题 */
    async problemFromBtn() {
      let arr = this.multipleSelection.map((item) => item.id);
      let ids = arr.join(",");
      this.problemFrom.ids = ids;
      let res = await bookCatalogsproblem(this.problemFrom);
      console.log(res);
      if (res.data.code === 200) {
        this.$message({
          showClose: true,
          duration: 3000,
          message: res.data.msg,
          type: "success",
        });
        this.dialogVisible = false;
      } else {
        this.$message({
          showClose: true,
          duration: 3000,
          message: res.data.msg,
          type: "error",
        });
      }
    },
    /* 查看pdf */
    /*   async SeePdf(row) {
      console.log(row);
      let res = await bookContents();
      console.log(res, "1111");
      this.datas = res.data.data;
      this.pageUrl = row.file_url;
      this.Pdflist.book_catalog_id = row.id;
      this.centerDialogVisible = true;
    }, */
    /* 多选输入框返回输入建议的方法 */
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString
        ? restaurants.filter(this.createFilter(queryString))
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    /* 输入建议框提供的建议 */
    loadAll() {
      return [
        { id: "1", value: "案卷题名重复" },
        { id: "2", value: "页号错误" },
        { id: "3", value: "日期错误" },
        { id: "4", value: "底图错误" },
        { id: "5", value: "档案号错误" },
        { id: "6", value: "页册错误" },
      ];
    },
    /* 输入建议框选中的值 */
    handleSelect(item) {
      console.log(item);
    },
  },
  created() {
    /* this.loadData2();
    this.restaurants = this.loadAll(); */
  },
  /* mounted: function () {
    this.loadData2();
  }, */
};
</script>

<style scoped lang="less">
@import "../../../../../assets/css/tree.less";
.top {
  margin: 0px 0;
}

/deep/.el-table__header {
  margin-bottom: 20px;
  line-height: 40px;
}
/deep/.el-table {
  background-color: #f3f5fb;
}
/deep/.el-table .cell {
  display: flex;
}
/deep/.table .el-button--mini {
  font-size: 18px !important;
  padding: 7px 5px;
  margin: 0 5px;
}
/deep/.el-dialog__header {
  padding: 20px 20px 16px;
}
.top {
  display: flex;
  justify-content: space-between;
  /* .el-button {
    padding: 5px 5px;
  }*/
  .top-left {
    display: flex;
    flex-wrap: wrap;
    .el-button {
      padding: 3px 3px;
      height: 30px;
    }
  }
}
.top-right {
  flex: 1;
  .el-form {
    display: flex;
    flex-wrap: wrap;
    margin: 6px 0;
    /deep/.el-form-item {
      margin-bottom: 0px;
    }
  }
  /deep/.el-input__inner {
    height: 30px;
    line-height: 30px;
    padding: 0 9px;
  }
  .el-input {
    width: 88%;
  }
  .el-select {
    width: 60%;
  }
  /deep/.el-form-item__content {
    margin-left: 64px !important;
  }
}
/deep/.el-textarea__inner {
  height: 47px;
}
.el-textarea {
  width: 250px;
  font-size: 12px;
}
.TextArea {
  /deep/.el-form-item__content {
    margin-left: 90px !important;
  }
}
.table {
  /deep/.el-input__inner {
    padding: 0 5px;
  }
}
/deep/.el-radio-button__inner {
  padding: 7px 7px;
}
.IPBT {
  .el-input {
    width: 72%;
  }
}
.Btn {
  padding: 10px 15px;
  border-radius: 5%;
  border: 1px solid #ccc;
  cursor: pointer;
}
/deep/.el-input--mini .el-input__inner {
  height: 40px;
}
/deep/.el-input__suffix {
  right: 10px;
}
.login-btn {
  display: flex;
  justify-content: space-around;
}
.Sync {
  display: flex;
  .leftSync {
    width: 20%;
  }
  .rightSync {
    width: 80%;
    display: flex;
    i {
      font-size: 60px;
      margin: auto;
    }
  }
}
/* .custom-tree-node .nodeLabel {
  color: #666;
} */
.top-right .classBack {
  padding: 6px 20px;
  height: 35px;
}
/* .custom-tree .el-tree-node__content {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
} */
.span-ellipsis {
  width: calc(100% - 4px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: auto;
  padding: 4px 2px;
  border-radius: 4px;
}
.el-table td.el-table__cell div {
  width: 100%;
}

/deep/.el-textarea.is-disabled .el-textarea__inner {
  color: #5b5454;
}
/deep/.el-input.is-disabled .el-input__inner {
  color: #5b5454;
}
/deep/.el-textarea__inner {
  padding: 2px 2px;
  font-size: 14px;
}
.inline-input {
  width: 85%;
}
.commontop .el-input {
  width: 20%;
  background-color: #fff;
}
/deep/.commontop-left .elSect .el-input {
  width: 100%;
}
// 滚动条的宽度
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 6px; // 横向滚动条
  height: 6px; // 纵向滚动条 必写
}
// 滚动条的滑块
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 3px;
}
</style>